<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .s-img{
            border: 2px red solid;
            border-radius: 20px;
        }
    </style>
    <script>
        onload = function () {
            var elementById = document.getElementById("btn");
            console.log(elementById)
        };

    </script>
</head>
<body style="background: #0a58ca;color: gold" id="body">
<button id="btn" >测试按钮</button>
<div id="div5">hello
    <h3>静夜思</h3>
    <p>床前明月光，</p>
    <p>疑是地上霜；</p>
    <p>举头望明月，</p>
    <p>低头思故乡。</p>
</div>
<button onclick="fn()">按钮</button>
<img id="image" name="img1"  src="../static/img.png" alt="">
<div id="div">
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <div id="div4">4</div>
</div>
<script>

    var btn = document.getElementById("btn");
    console.log(btn)
    btn.onclick = function () {
        alert("123")
    };

    function fn1() {
        alert("123")
    }

  function fn() {
      var imgTag = document.createElement("img"); //<img>
//2.创建属性节点
      var srcAttr = document.createAttribute("src"); // src=""
      srcAttr.nodeValue = "../static/img_1.png"; //src="static/img/xju.jpg"
//3.将属性节点添加到标签节点中
      imgTag.setAttributeNode(srcAttr); // <imgsrc="static/img/xju.jpg">
      var body = document.body;
        // body.appendChild(imgTag)
      var div5 = document.getElementById("div5");
        // body.insertBefore(imgTag,div5)

      var div = document.getElementById("div");
      // body.replaceChild(div,div5)

      // div.remove()
      body.removeChild(div)

      var childNodes = div5.childNodes;
      // console.log(childNodes)
      // console.log(childNodes[1].firstChild.nodeValue)
      // console.log(childNodes[1].nodeName)
      // console.log(childNodes[1].nodeValue)


      var attributes = body.attributes;
      // console.log(attributes)
      // console.log(attributes[0].nodeType)
      // console.log(attributes[0].nodeName)
      // console.log(attributes[0].nodeValue)


    var elementById = document.getElementById("image");
    console.log(elementById)
    console.log(elementById.src)
      // elementById.src= "../static/img_1.png"

      // elementById.style.border = "2px red solid";
      // elementById.style.borderRadius="10px";
        elementById.className = "s-img"


    // console.log(div.innerText)
    //   console.log(div.children)
    //   console.log(div.firstElementChild)
    //   console.log(div.lastElementChild)


    // var elementsByClassName = document.getElementsByClassName("s-img");
    // console.log(elementsByClassName)
    // var elementsByTagName = document.getElementsByTagName("img");
    // console.log(elementsByTagName)
    // var elementsByName = document.getElementsByName("img1");
    // console.log(elementsByName)


    // document.write("hello")
    // // document.close()
    // document.open()
    // document.write("hi")
  }

  // console.log(document.body)
  // console.log(document.title)
  // console.log(document.URL)
  // document.title = "hello"

  // console.log(window.document)
  // console.log(document)
  // all : 获取当前网页文档中的所有元素
  var arr1 = document.all;
  // imgs : 获取当前网页文档中所有图片
  var arr2 = document.images;
  // links: 获取当前网页文档中所有的链接(a,area)
  var arr3 = document.links;
  // forms：获取当前网页文档中的form元素
  var arr4 = document.forms;
  // console.log(arr1)
  // console.log(arr2)
  // console.log(arr3)
  // console.log(arr4)

</script>
</body>
</html>